BorderControl: Render border color/style dropdown as UnitControl prefix #42212
Conversation
aaronrobertshaw
added
[Type] Enhancement
There was a problem hiding this comment.
Nice cleanup PR @aaronrobertshaw! This is testing well for me in Storybook and the different widths (compact and custom width), and the component still looks and functions the same in the editor via a Group block and the border controls.
LGTM! ✨
| /* Prevent unit select forcing min height larger than its UnitControl */ | ||
| min-height: 0; | ||
| ${ rtl( | ||
| { | ||
| borderRadius: '0 1px 1px 0', | ||
| marginRight: 0, | ||
| }, | ||
| { | ||
| borderRadius: '1px 0 0 1px', | ||
| marginLeft: 0, | ||
| } | ||
| { borderRadius: '0 2px 2px 0' }, | ||
| { borderRadius: '2px 0 0 2px' } |
There was a problem hiding this comment.
I'm not sure I understand what these styles are for 🤔 Are they no longer needed...?
The :focus stuff too, should they be moved to UnitControl itself? (Not necessarily in this PR)
There was a problem hiding this comment.
I swear that when I was putting this PR together I still needed these styles or the unit select showed square corners. I must have been seeing things. After retesting the border-radius rules can be removed.
While testing the focus styles it looks like the focus styling in general for the UnitControl is a little broken e.g. wrapper's border overlays the unit selects focus border/box-shadow etc.
I've moved these focus styles to the UnitControl in a separate PR in the hope that might provide a better historical record if we need to revisit them in the future. See #42383.
For this PR, I'll update it shortly to target the #42383 branch as its base and simply remove the overrides from the BorderControl.
aaronrobertshaw
force-pushed
the
refactor/border-control-dropdown
branch
2 times, most recently
from
41dce38 to
ffc8d0d
Compare
aaronrobertshaw
changed the base branch from
trunk
to
update/unit-control-select-focus-styling
|
Nice PR, too bad it was ignored by the 6.0.1 update from earlier today. |
aaronrobertshaw
force-pushed
the
update/unit-control-select-focus-styling
branch
from
2cfb9f2 to
4a6a3e6
Compare
aaronrobertshaw
force-pushed
the
refactor/border-control-dropdown
branch
from
ffc8d0d to
9974f64
Compare
aaronrobertshaw
force-pushed
the
refactor/border-control-dropdown
branch
from
9974f64 to
498d1df
Compare
What?
Renders the
BorderControldropdown as aprefixwithin itsUnitControl.Why?
Rendering as a prefix on the UnitControl allows us to reduce some of the CSS overrides.
How?
UnitControlPropstype to allow aReactNodefor theprefixprop.UnitControl'sprefix.HStackwrapper and cleans up/fixes stylesTesting Instructions
npm run build:package-typesBorderControlunit tests still pass:npm run test-unit packages/components/src/border-control/testBorderBoxControlunit tests pass:npm run test-unit packages/components/src/border-box-control/testBorderControl&BorderBoxControlisCompactandwidthprops.